<!DOCTYPE html>
<html>
<head>
	<title>Dashboard Template for Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<script type="text/javascript" hrd></script>
	<style>
	.navbar-collapse
	{
		border-top: 0px!important;
	}
	.navbar
	{
		margin-bottom: 0px!important;
		border-radius: 0px!important;
	}
	#leftMenu
	{
		width: 200px;
		padding-left: 0px!important;
	}

	#leftMenu .accordion-group {
		margin-bottom: 0px;
		border:0px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}    

	#leftMenu .accordion-heading {
		height: 34px;
		border-top: 1px solid #717171; /* inner stroke */
		border-bottom: 1px solid #5A5A5A; /* inner stroke */
		background-color: #353535; /* layer fill content */
		background-image: -moz-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
		background-image: -o-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
		background-image: -webkit-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
		background-image: linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
		list-style-type:none;
	}  

	#leftMenu .accordion-heading  a{  
		color: #cbcbcb; /* text color */
		text-shadow: 0 1px 0 #3b3b3b; /* drop shadow */
		text-decoration:none;
		font-weight:bold;  
	}

	#leftMenu .accordion-heading  a:hover{  
		color:#ccc     
	}

	#leftMenu .accordion-heading .active {
		width: 182px;
		height: 34px;
		border: 1px solid #5b5b5b; /* inner stroke */
		background-color: #353535; /* layer fill content */
		background-image: -moz-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
		background-image: -o-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
		background-image: -webkit-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
		background-image: linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
	}
	
	#leftMenu ul
	{
		background-color: #353535;
		background-image: linear-gradient(90deg, #595B59 0%, #616161 100%);
		margin: 0px!important;
		padding-left: 20px;
	}
	#leftMenu ul li{
		color: #CBCBCB!important;
		list-style: none;
		padding: 4px;
	}
	</style>
</head>

<body>
	<div id="header">
		<nav class="navbar  navbar-inverse" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">


					<a href="javascript:void(0);" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle">
						<i class="glyphicon glyphicon-align-justify"></i>
					</a>
					<!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button> -->
					<a href="javascript:void(0);" data-toggle="collapse" data-target="#leftMenu" class="navbar-toggle">
						<i class="glyphicon glyphicon-cog"></i>
					</a>
					<a class="navbar-brand" href="#">Brand</a>
				</div>
				
				<!-- <div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#leftMenu">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>

					<a href="javascript:;" data-toggle="collapse" data-target="#leftMenu" class="navbar-toggle">
						<i class="glyphicon glyphicon-cog"></i>
					</a>
					<a class="navbar-brand" href="#">Dashboard</a>
				</div> -->
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search">
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
	</div>
	<div class="accordion collapse navbar-collapse" id="leftMenu">
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#">
					<i class="glyphicon glyphicon-home"></i> Dashboard
				</a>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
					<i class="glyphicon glyphicon-th"></i> Layout
				</a>
			</div>
			<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
				<div class="accordion-inner">
					<ul>

						<li><small><i class="glyphicon glyphicon-glass"></i> </small>   This is one</li>
						<li><small><i class="glyphicon glyphicon-pencil"></i> </small>This is two</li>
						<li><small><i class="glyphicon glyphicon-th"></i> </small>This is Three</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree">
					<i class="glyphicon glyphicon-th-list"></i> UI Components
				</a>
			</div>
			<div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
				<div class="accordion-inner">
					<ul>
						<li><small><i class="glyphicon glyphicon-user"></i> </small>This is one</li>
						<li><small><i class="glyphicon glyphicon-star-empty"></i> </small>This is two</li>
						<li><small><i class="glyphicon glyphicon-film"></i> </small>This is Three</li>
					</ul>                 
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFour">
					<i class="glyphicon glyphicon-list-alt"></i> Forms
				</a>
			</div>
			<div id="collapseFour" class="accordion-body collapse" style="height: 0px; ">
				<div class="accordion-inner">
					<ul>
						<li><small><i class="glyphicon glyphicon-off"></i> </small>This is one</li>
						<li><small><i class="glyphicon glyphicon-signal"></i> </small>This is two</li>
						<li><small><i class="glyphicon glyphicon-road"></i> </small>This is Three</li>
					</ul>                 
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFive">
					<i class="glyphicon glyphicon-cog"></i> Plugins
				</a>
			</div>
			<div id="collapseFive" class="accordion-body collapse" style="height: 0px; ">
				<div class="accordion-inner">
					<ul>
						<li><small><i class="glyphicon glyphicon-play-circle"></i> </small>This is one</li>
						<li><small><i class="glyphicon glyphicon-upload"></i> </small>This is two</li>
						<li><small><i class="glyphicon glyphicon-inbox"></i> </small>This is Three</li>
					</ul>                 
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseSix">
					<i class="glyphicon glyphicon-file"></i> Templates
				</a>
			</div>
			<div id="collapseSix" class="accordion-body collapse" style="height: 0px; ">
				<div class="accordion-inner">
					<ul>
						<li><small><i class="glyphicon glyphicon-lock"></i> </small>This is one</li>
						<li><small><i class="glyphicon glyphicon-flag"></i> </small>This is two</li>
						<li><small><i class="glyphicon glyphicon-text-height"></i> </small>This is Three</li>
					</ul>                 
				</div>
			</div>
		</div>
	</div>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
	<script src="js/bootstrap.min.js"></script> 
</body>
</html>